<template>
    <div class="companyprofile">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            公司简介管理
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="u_content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">公司简介管理</p>
                        </div>
                        <div class="ivu-card-body">
                            <div class="iphone">
                                <div class="iphone-top">
                                    <span class="camera"></span>
                                    <span class="sensor"></span>
                                    <span class="speaker"></span>
                                </div>
                                <div class="top-bar"></div>
                                <div class="iphone-screen">
                                    <vue-html5-editor :content="content" :height="598" @change="updateData"></vue-html5-editor>
                                </div>
                                <div class="buttons">
                                    <span class="on-off"></span>
                                    <span class="sleep"></span>
                                    <span class="up"></span>
                                    <span class="down"></span>
                                </div>
                                <div class="bottom-bar"></div>
                                <div class="iphone-bottom">
                                    <span></span>
                                </div>
                            </div>
                            <div class="btn-box">
                                <Button type="primary" @click="release">发布</Button>
                            </div>
                        </div>
                    </div>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>

</template>

<script>
    import * as api from '@/api/api'
    export default {
        data() {
            return {
                host: window.location.host,
                loading: this.$store.state,
                content: '',
                editCon: ''
            }
        },
        mounted() {
            this.init()
        },

        computed: {

        },

        watch: {

        },

        methods: {
            init() {
                api.getCompanyInfo().then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code == 200) {
                        this.content = res.data.data.content
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: '未知错误，请检查网络连接'
                    });
                })
                
            },
            updateData(value) {
                this.editCon = value;
            },
            release() {
                let body = {
                    content: this.editCon
                }
                this.loading.isLoading = true;
                api.setCompanyInfo(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code == 200) {
                        this.$Notice.success({
                            title: '提示',
                            desc: '恭喜你，发布成功！'
                        });
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
                }).catch(err => {
                    this.loading.isLoading = false;
                    this.$Notice.error({
                        title: '错误',
                        desc: '未知错误，请检查网络连接'
                    });
                })
            }
        }
    }

</script>


<style lang="less">
    @import '../../assets/styles/constant.less';

    .companyprofile {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;

        .ivu-layout {
            min-height: 100%;
        }

        .header {
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;

            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }

        .u_content {
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;

            .ivu-card-head {
                background-color: #f2f2f2;
            }

            .ivu-card-body {
                .custom-icon {
                    background-size: 100% 100%;
                    display: inline-block;
                }

                /* 样式1 */
                .iphone {
                    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
                    border: 5px solid #d9dbdc;
                    background: #f8f8f8;
                    padding: 15px;
                    border-radius: 50px;
                    height: 877px;
                    width: 423px;
                    position: relative;
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                    margin: auto;
                    top: -70px;
                }

                .iphone-top {
                    padding: 5px 110px 40px;
                    position: relative;
                }

                .iphone-top .speaker {
                    display: block;
                    width: 70px;
                    height: 6px;
                    margin: 0 auto;
                    border-radius: 6px;
                    background: #292728;
                }

                .iphone-top .camera {
                    display: block;
                    margin: 0 auto;
                    height: 10px;
                    width: 10px;
                    border-radius: 50%;
                    margin-bottom: 13px;
                    background: #333;
                }

                .iphone-top .sensor {
                    display: block;
                    width: 15px;
                    height: 15px;
                    float: left;
                    background: #333;
                    margin-top: -5px;
                    border-radius: 50%;
                }

                .iphone .top-bar,
                .iphone .bottom-bar {
                    display: block;
                    width: 423px;
                    height: 15px;
                    border-left: 5px solid #BBB;
                    border-right: 5px solid #BBB;
                    position: absolute;
                    left: -5px;
                }

                .iphone .top-bar {
                    top: 65px;
                }

                .iphone .bottom-bar {
                    bottom: 65px;
                }

                .iphone-screen {
                    background: #eee;
                    border: 1px solid #fff;
                    height: 677px;
                    width: 375px;
                    margin: 0 auto;
                    border: 2px solid rgba(0, 0, 0, 0.9);
                    border-radius: 3px;
                    overflow: hidden;
                    // overflow-y: scroll;
                    // overflow-x: hidden; 
                    .content {
                        overflow-y: auto;
                        overflow-x: hidden;
                        height: 598px;
                    }
                    .content::-webkit-scrollbar {/*滚动条整体样式*/
                        width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                        height: 1px;
                    }
                    .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                        border-radius: 4px;
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                        background: #535353;
                    }
                    .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
                        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                        border-radius: 10px;
                        background: #EDEDED;
                    }
                }

                .iphone-screen img {
                    width: 100%;
                }

                .iphone .buttons .on-off,
                .iphone .buttons .up,
                .iphone .buttons .down,
                .iphone .buttons .sleep {
                    display: block;
                    background: #CCC;
                    position: absolute;
                    border-radius: 2px 0px 0px 2px;
                }

                .iphone .buttons .on-off {
                    height: 40px;
                    width: 3px;
                    top: 100px;
                    left: -8px;
                }

                .iphone .buttons .up,
                .iphone .buttons .down,
                .iphone .buttons .sleep {
                    height: 60px;
                    width: 5px;
                    left: -10px;
                }

                .iphone .buttons .up {
                    top: 170px;
                }

                .iphone .buttons .down {
                    top: 250px;
                }

                .iphone .buttons .sleep {
                    left: auto;
                    right: -10px;
                    top: 170px;
                    border-radius: 0px 2px 2px 0px;
                }

                .iphone-bottom {
                    padding: 10px 0 0;
                }

                .iphone-bottom span {
                    display: block;
                    margin: 0 auto;
                    width: 68px;
                    height: 68px;
                    background: #ccc;
                    border-radius: 50%;
                    background: -webkit-linear-gradient(315deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
                    background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
                    position: relative;
                }

                .iphone-bottom span:after {
                    content: "";
                    display: block;
                    width: 60px;
                    height: 60px;
                    background: #fff;
                    border-radius: 50%;
                    position: absolute;
                    left: 4px;
                    top: 4px;
                }

                .custom-icon.text {
                    background-image: url(../../../static/ico/custom-icons/text.png);
                }

                .custom-icon.font {
                    background-image: url(../../../static/ico/custom-icons/font.png);
                }

                .custom-icon.align {
                    background-image: url(../../../static/ico/custom-icons/align.png);
                }

                .custom-icon.list {
                    background-image: url(../../../static/ico/custom-icons/list.png);
                }

                .custom-icon.color {
                    background-image: url(../../../static/ico/custom-icons/color.gif);
                }

                .custom-icon.eraser {
                    background-image: url(../../../static/ico/custom-icons/eraser.gif);
                }

                .custom-icon.full-screen {
                    background-image: url(../../../static/ico/custom-icons/full-screen.gif);
                }

                .custom-icon.hr {
                    background-image: url(../../../static/ico/custom-icons/hr.gif);
                }

                .custom-icon.image {
                    background-image: url(../../../static/ico/custom-icons/image.gif);
                }

                .custom-icon.link {
                    background-image: url(../../../static/ico/custom-icons/link.gif);
                }

                .custom-icon.table {
                    background-image: url(../../../static/ico/custom-icons/table.gif);
                }

                .custom-icon.undo {
                    background-image: url(../../../static/ico/custom-icons/undo.gif);
                }

                .custom-icon.unlink {
                    background-image: url(../../../static/ico/custom-icons/unlink.gif);
                }

                .custom-icon.info {
                    background-image: url(../../../static/ico/custom-icons/info.png);
                }
                .btn-box {
                    position: absolute;
                    bottom: 120px;
                    left: 48%;
                }
            }
        }

        .copy-right {
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }

</style>
